<template>
  <div class="call-name-record">
    <CustomTable ref="tableRef" height="965rem" type="index" :tableHeader="tableHeader" api="/znjszd3/ht/jsdmjlcx/getDmjlList" :params="reqParams">
      <template v-slot:lastColumn="{ row }">
        <el-button type="primary" plain @click.stop="viewRoom(row)">
          <el-icon><View /></el-icon>
          详情</el-button
        >
      </template>
    </CustomTable>
    <CustomDialog title="点名监室" top="6vh" width="85%" height="960rem" v-model:dialogVisible="dialogVisible" confirmText="关闭" @confirm="dialogVisible = false">
      <CustomTable v-if="jshParams.dmjlid" ref="tableRef" height="810rem" type="index" :tableHeader="jsTableHeader" api="/znjszd3/ht/jsdmjlcx/getDmjsList" :params="jshParams">
        <template v-slot:lastColumn="{ row }">
          <el-button type="primary" plain @click.stop="viewPerson(row)">
            <el-icon><View /></el-icon>
            详情</el-button
          >
        </template>
      </CustomTable>
    </CustomDialog>
    <CustomDialog title="点名人员" top="9vh" height="900rem" v-model:dialogVisible="personDialogVisible" confirmText="关闭" @confirm="personDialogVisible = false">
      <CustomTable class="person-table" v-if="personParams.dmjsid" ref="tableRef" height="750rem" type="index" :tableHeader="perosnTableHeader" api="/znjszd3/ht/jsdmjlcx/getDmryList" :params="personParams" :showPagination="false">
        <template #zpurl="{ row }">
          <PhotoScale :src="row.zpurl" />
        </template>
        <template #bdjg="{ row }">
          <span v-if="row.bdjg == '成功'" style="color: #67c23a">{{ row.bdjg }}</span>
          <span v-else style="color: red">{{ row.bdjg }}</span>
        </template>
        <template #bdtpurl="{ row }">
          <PhotoScale :src="row.bdtpurl" />
        </template>
      </CustomTable>
    </CustomDialog>
  </div>
</template>

<script setup name="callNameRecord">
import { ref, onBeforeMount, onMounted, computed, watch, onBeforeUnmount } from 'vue'
import { http, fillData } from '@/utils/index.js'
import { stores } from '@/stores/index.js'
const props = defineProps({})
//查看点名监室
const dialogVisible = ref(false)
//查看点名人员
const personDialogVisible = ref(false)
const tableHeader = ref([
  {
    key: 'lx',
    label: '点名方式'
  },
  {
    key: 'kssj',
    label: '开始时间'
  },
  {
    key: 'ydrs',
    label: '应到人数'
  },
  {
    key: 'sdry',
    label: '实到人数'
  },
  {
    key: 'timemin',
    label: '点名时长'
  },

  {
    key: 'bgr',
    label: '点名者'
  }
])
const jsTableHeader = ref([
  {
    key: 'jszw',
    label: '监室号'
  },
  {
    key: 'kssj',
    label: '开始时间'
  },
  {
    key: 'ydrs',
    label: '应到人数'
  },
  {
    key: 'sdry',
    label: '实到人数'
  },
  {
    key: 'timemin',
    label: '点名时长'
  },

  {
    key: 'bgr',
    label: '点名者'
  }
])
const perosnTableHeader = ref([
  {
    key: 'xm',
    label: '姓名'
  },
  {
    key: 'jszw',
    label: '监室号'
  },
  {
    key: 'zpurl',
    label: '照片'
  },

  {
    key: 'dmcs',
    label: '点名次数'
  },
  {
    key: 'resulttime',
    label: '签到时间'
  },
  {
    key: 'bdjg',
    label: '比对结果'
  },
  {
    key: 'bdtpurl',
    label: '比对照片'
  },

  {
    key: 'bz',
    label: '备注'
  }
])
const searchForm = ref({})
const reqParams = ref({})
//查看点名监室记录
const jshParams = ref({
  dmjlid: ''
})
//查看监室人员点名记录
const personParams = ref({
  dmjsid: ''
})
onMounted(() => {
  // getJshList()
})

//查看店名监室记录
const viewRoom = (row) => {
  console.log(row)

  jshParams.value.dmjlid = row.id
  console.log(jshParams.value.dmjlid)
  dialogVisible.value = true
}
//查看点名人员记录
const viewPerson = (row) => {
  console.log(row)

  personParams.value.dmjsid = row.id

  personDialogVisible.value = true
}
</script>
<style lang="scss" scoped>
.call-name-record {
  width: 100%;
  height: 100%;
}
.table-box-1 {
  border-top: var(--el-border);
  padding: 15px;
  height: 830px;
}
.table-box-2 {
  border-top: var(--el-border);
  padding: 15px;
  height: 770px;
}

.person-table {
  .photo {
    margin-top: 6px;
    width: 25px;
    max-height: 45px;
  }
}
</style>
